<template>
  <div>
    <div class="com_title">
      <h3>
        组件列表
        <span class="tips">(tips：点击tag预览组件)</span>
      </h3>
      <div class="com_title__tag">
        <el-tag
          v-for="item in componentData"
          :key="item.id"
          v-ripple
          class="tag"
          effect="dark"
          :type="item.selected? 'danger': 'info'"
          :title="item.id"
          size="medium"
          @click="switchCom(item)"
        >
          {{ item.name }}
        </el-tag>
      </div>
    </div>
    <div>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            {{ currentName }}
          </div>
        </template>
        <div class="text item">
          <component :is="componentId"/>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import * as components from './components'
import ripple from '@/directives/ripple'

interface CommoentData {
  id: string
  name: string
  selected: boolean
}

export default defineComponent({
  name: 'CommonLib',
  components: {
    ...components
  },
  directives: {
    ripple
  },
  setup() {
    // 常用组件
    const componentData: Array<CommoentData> = reactive([
      { id: 'Search', name: '搜索栏', selected: true },
      { id: 'Pagination', name: '分页', selected: false },
      { id: 'LiMiDialog', name: '对话框', selected: false },
      { id: 'RichEditor', name: '富文本编辑器', selected: false },
      { id: 'AddrSelector', name: '地址选择', selected: false },
      { id: 'UploadVideo', name: '视频上传', selected: false }
    ])
    const currentName = ref(componentData[0].name)
    const componentId = ref<string>('Search')
    return {
      componentId,
      componentData,
      switchCom: (item: CommoentData) => {
        componentId.value = item.id
        componentData.forEach(item => { item.selected = false })
        item.selected = true
        currentName.value = item.name
      },
      currentName,
      repeatClick: () => {
        // eslint-disable-next-line no-console
        console.log('ok')
      }
    }
  }
})
</script>
<style lang="less" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.com_title {
  margin-bottom: 18px;
  &__tag {
    padding-left: 16px;
    .tag {
      cursor: pointer;
      margin-right: 10px;
    }
  }
}
.tips {
  color: #3eaf7c;
  font-size: 14px;
}
</style>
